<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加商品 </el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card class="box-card">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input
            placeholder="请输入内容"
            v-model="queryinfo.query"
            @change="handleInput"
            clearable
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="handleInput"
            ></el-button>
          </el-input>
        </el-col>
        <el-col :span="9">
          <el-button type="primary" @click="goAddPage"> 添加商品</el-button>
        </el-col>
      </el-row>
      <!-- table表格区域   -->
      <el-table :data="goodsList" style="width: 100%" stripe border>
        <el-table-column type="index" width="50" label="#"> </el-table-column>
        <el-table-column
          prop="goods_name"
          label="商品名称"
          width="400"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="goods_price"
          label="商品价格"
          width="80"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="goods_weight"
          label="商品重量"
          align="center"
          width="80"
        >
        </el-table-column>
        <el-table-column label="创建时间" align="center">
          <template slot-scope="scope">
            <div>
              {{ scope.row.upd_time | formatDate }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <!-- 修改按钮 -->
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              style="margin-right: 10px"
            ></el-button>
            <!-- 删除按钮 -->
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              style="margin-right: 10px"
              @click="deleteGoodsById(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryinfo.pagenum"
        :page-sizes="[5, 10, 20, 30, 40, 50, 80]"
        :page-size="queryinfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script type="text/ecmascript-6">
import { reqGoodsList, reqDeleteGoodsById } from "../../api";
export default {
  data() {
    return {
      // 查询数据
      queryinfo: {
        // 查询参数
        query: "",
        // 当前页码
        pagenum: 1,
        // 一页显示多少条
        pagesize: 5,
      },
      // 商品数据列表
      goodsList: [],
      // 总条数
      total: 0,
    };
  },
  mounted() {
    // 获取商品列表
    this.getGoodsList();
  },
  methods: {
    // 获取商品列表
    async getGoodsList() {
      const result = await reqGoodsList(this.queryinfo);
      if (result.meta.status != 200)
        return this.$message.error(result.meta.msg);
      this.goodsList = result.data.goods;
      this.total = result.data.total;
    },
    // 监听handleSizeChange 当前页显示多少条的函数
    handleSizeChange(pagesize) {
      this.queryinfo.pagesize = pagesize;
      this.getGoodsList();
    },
    // 监听handleCurrentChange 一个有多少页的函数
    handleCurrentChange(pagenum) {
      this.queryinfo.pagenum = pagenum;
      this.getGoodsList();
    },
    // input输入框搜索触发的函数
    handleInput() {
      if (this.queryinfo.query.trim() === "")
        return (this.queryinfo.query = "");
      this.getGoodsList();
    },
    // 通过id删除商品
    deleteGoodsById(row) {
      this.$confirm("此操作将永久删除该商品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          // 发请求，根据id删除商品
          const result = await reqDeleteGoodsById(row.goods_id);
          if (result.meta.status != 200)
            return this.$message.error(result.meta.msg);
          this.$message.success(result.meta.msg);
          this.getGoodsList();
        })
        .catch(() => {});
    },
    goAddPage() {
      this.$router.push("goods/add");
    },
  },
};
</script>

<style lang="less" scoped>
</style>